<template>
  <div class="colorSelectContainer">
    <div
      :style="{
        background: item,
      }"
      v-for="item in colorList"
      @click="handleColor(item)"
      class="colorItem"
    >
      <img v-show="item === model" src="@/assets/check.svg" />
    </div>
  </div>
</template>

<script setup lang="ts">
  const model = defineModel();
  const colorList = [
    "#c6c8cc",
    "#5a606b",
    "#5fd9c6",
    "#7ad94e",
    "#d98657",
    "#ffce40",
    "#ff8c3f",
    "#ff5757",
    "#fe6fd4",
    "#ab6bff",
    "#4dbafd",
    "#3e70f8",
  ];
  const handleColor = (color) => {
    model.value = color;
  };
</script>

<style scoped lang="scss">
  .colorSelectContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    .colorItem {
      border-radius: 50%;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      .img {
        width: 14px;
        height: 14px;
      }
    }
  }
</style>
